<template>
	<view class="page-container flex fd-c">
		<!-- 顶部状态栏 -->
		<topBar v-if="!isShowActivity" />
		<topBar v-if="isShowActivity" :back="false" :isPerson="false">
			<template #left>
				<!-- <uni-icons type="left" size="24" style="margin-right: 20rpx;" color="#000"
						@click="isShowActivity = false" class="flex ai-c"></uni-icons> -->
				<image src="/static/zuojianyoufanhui.png" @click="isShowActivity = false" mode="widthFix"
					style="width: 52rpx;height: 52rpx;margin-right: 20rpx;"></image>
			</template>
		</topBar>
		<scroll-view class="scrollable-content" v-if="!isShowActivity" scroll-y>
			<!-- 问候语 -->
			<!-- <view class="greeting-section flex ai-c">
				<text class="greeting">你好, {{ userStore.userInfo.nickname }}</text>
			</view> -->

			<view class="greeting-section flex ai-c">
				<text class="greeting" v-if="userStore.userInfo && userStore.userInfo.nickname">
					你好, {{ userStore.userInfo.nickname }}
				</text>
				<text class="greeting" v-else>你好，请登录</text> <!-- 未登录时显示的文本 -->
			</view>

			<!-- 难度等级区域 -->
			<view class="difficulty-section flex jc-sb">

				<view class="difficulty-card beginner flex fd-c ai-c jc-c" @click="handleBeginnerClick('chuji', 1)">
					<image class="bg-image" src="/static/chuji.png" mode="aspectFill"></image>
					<image src="/static/chujilogo.png" mode="widthFix"
						style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
					<text class="title">初级场</text>
				</view>
				<view class="difficulty-card intermediate flex fd-c ai-c jc-c"
					@click="handleBeginnerClick('zhongji', 1)">
					<image class="bg-image" src="/static/zhongji.png" mode="aspectFill"></image>
					<image src="/static/zhongjilogo.png" mode="widthFix"
						style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
					<text class="title">中级场</text>
				</view>
				<view class="difficulty-card advanced flex fd-c ai-c jc-c" @click="handleBeginnerClick('gaoji', 1)">
					<image class="bg-image" src="/static/gaoji.png" mode="aspectFill"></image>
					<image src="/static/gaojilogo.png" mode="widthFix"
						style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
					<text class="title">高级场</text>
				</view>
				<view class="difficulty-card expert flex fd-c ai-c jc-c" @click="handleBeginnerClick('zhuanjia', 1)">
					<image class="bg-image" src="/static/zhuanjia.png" mode="aspectFill"></image>
					<image src="/static/zhuanjialogo.png" mode="widthFix"
						style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
					<text class="title">专家场</text>
				</view>
			</view>

			<!-- 大师场区域 -->
			<view style="padding: 0 32rpx;margin-bottom: 16rpx;" @click="handleBeginnerClick('dashi', 1)">
				<view class="master-card flex fd-c ai-c jc-c">
					<image class="bg-image" src="/static/dashi.png" mode="aspectFill"></image>
					<image src="/static/dashilogo.png" mode="widthFix"
						style="width: 70rpx;height: 70rpx; position: relative; z-index: 2;"></image>
					<text class="master-title">大师场</text>
				</view>
			</view>
			<!-- 游戏模式区域 -->
			<view class="game-modes-section">
				<view class="modes-row flex">
					<view class="mode-card flex fd-c ai-c jc-c" @click="handlePaiweiClick">
						<image src="/static/paiwei.png" mode="aspectFill" class="bg-image" style="height: 317rpx;">
						</image>
						<image src="/static/paiweilogo.png" mode="widthFix"
							style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
						<text class="mode-title">排位赛</text>
					</view>
					<view class="flex-1 flex fd-c ai-c jc-c" style="gap: 16rpx;height: 317rpx;">
						<view class="flex-1 flex ai-c jc-c mode-card"
							style="overflow: hidden; gap: 24rpx;border-radius: 40rpx;position: relative;width: 100%;"
							@click="handleZizuClick">
							<image src="/static/zizu.png" mode="aspectFill" class="bg-image"></image>
							<image src="/static/zizulogo.png" mode="widthFix"
								style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
							<view class="mode-text flex fd-c jc-c">
								<text class="mode-title">自组局</text>
								<text class="mode-subtitle">邀请微信好友</text>
							</view>
						</view>
						<view class="flex-1 flex ai-c jc-c mode-card"
							style="overflow: hidden; gap: 24rpx;border-radius: 40rpx;position: relative;width: 100%;"
							@click="handleActivityClick">
							<image src="/static/huodong.png" mode="aspectFill" class="bg-image"></image>
							<image src="/static/huodonglogo.png" mode="widthFix"
								style="width: 72rpx;height: 72rpx; position: relative; z-index: 2;"></image>
							<view class="mode-text flex fd-c jc-c">
								<text class="mode-title">活动场</text>
								<text class="mode-subtitle">各种趣味内容</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 活动场 -->
		<scroll-view class="scrollable-content" v-if="isShowActivity" scroll-y
			style="padding-bottom: calc(20rpx + env(safe-area-inset-bottom));">
			<!-- 返回主页 -->
			<!-- <view class="flex jc-fd" @click="isShowActivity = false" style="margin-top: 60rpx;margin-right: 32rpx;">
				<text class="back-home-text">主页</text>
			</view> -->
			<!-- 艺术咖 -->
			<view class="game-modes-section" style="margin-top: 40rpx;margin-bottom: 20rpx;">
				<view class="modes-row flex">
					<view class="mode-card" @click="handleBeginnerClick(indexList.theme[6].code, 2)">
						<image :src="BASE_URL + indexList.theme[6].backimg" mode="aspectFill" class="bg-image">
						</image>
						<view class="mode-title"
							style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
							{{ indexList.theme[6].name }}</view>
						<view class="mode-title"
							style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
							品味大师杰作</view>
					</view>
					<view class="flex-1 flex fd-c ai-c jc-c" style="gap: 16rpx;height: 384rpx;">
						<view class="flex-1 mode-card"
							style="overflow: hidden; gap: 24rpx;border-radius: 40rpx;position: relative;width: 100%;"
							@click="handleBeginnerClick(indexList.theme[5].code, 2)">
							<image :src="BASE_URL + indexList.theme[5].backimg" mode="aspectFill" class="bg-image">
							</image>
							<view class="mode-text">
								<view class="mode-title"
									style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
									{{ indexList.theme[5].name }}
								</view>
								<view class="mode-title"
									style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
									寻找乐趣</view>
							</view>
						</view>
						<view class="flex-1 mode-card"
							style="overflow: hidden; gap: 24rpx;border-radius: 40rpx;position: relative;width: 100%;"
							@click="handleBeginnerClick(indexList.theme[4].code, 2)">
							<image :src="BASE_URL + indexList.theme[4].backimg" mode="aspectFill" class="bg-image">
							</image>
							<view class="mode-text">
								<view class="mode-title"
									style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
									{{ indexList.theme[4].name }}
								</view>
								<view class="mode-title"
									style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
									热爱花草树木的你</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 费脑子 -->
			<view style="padding: 0 32rpx;margin-bottom: 16rpx;"
				@click="handleBeginnerClick(indexList.theme[3].code, 2)">
				<view class="master-card" style="display: block;">
					<image class="bg-image" :src="BASE_URL + indexList.theme[3].backimg" mode="aspectFill"></image>
					<view class="master-title"
						style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
						{{ indexList.theme[3].name }}
					</view>
					<view class="master-title"
						style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
						考考思维缜密性
					</view>
				</view>
			</view>
			<!-- 潮不潮‘吧 -->
			<view class="game-modes-section" style="margin-bottom: 20rpx;">
				<view class="modes-row flex">
					<view class="mode-card" style="height: 384rpx;"
						@click="handleBeginnerClick(indexList.theme[2].code, 2)">
						<image :src="BASE_URL + indexList.theme[2].backimg" mode="aspectFill" class="bg-image">
						</image>
						<view class="mode-title"
							style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
							{{ indexList.theme[2].name }}
						</view>
						<view class="mode-title"
							style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
							测测你的时尚品味</view>
					</view>
					<view class="mode-card" style="height: 384rpx;"
						@click="handleBeginnerClick(indexList.theme[1].code, 2)">
						<image :src="BASE_URL + indexList.theme[1].backimg" mode="aspectFill" class="bg-image">
						</image>
						<view class="mode-title"
							style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
							{{ indexList.theme[1].name }}
						</view>
						<view class="mode-title"
							style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
							厨艺大显身手</view>
					</view>
				</view>
			</view>
			<!-- 娱乐“圈” -->
			<view style="padding: 0 32rpx;margin-bottom: 16rpx;"
				@click="handleBeginnerClick(indexList.theme[0].code, 2)">
				<view class="master-card" style="display: block;">
					<image class="bg-image" :src="BASE_URL + indexList.theme[0].backimg" mode="aspectFill"></image>
					<view class="master-title"
						style="color: #fff;font-size: 38rpx;margin-bottom: 12rpx;padding: 32rpx;padding-bottom: 0;">
						{{ indexList.theme[0].name }}
					</view>
					<view class="master-title"
						style="color: rgba(255, 255, 255, 0.6);font-size: 24rpx;padding: 32rpx;padding-top: 0;">
						考考思维缜密性
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 学科选择弹窗 -->
		<subject-selector ref="subjectSelectorRef" @confirm="handleSubjectConfirm" @close="handleSubjectClose" />
		<!-- 人数选择弹窗 -->
		<player-count-selector ref="playerCountSelectorRef" @confirm="handlePlayerCountConfirm"
			@close="handlePlayerCountClose" />
		<!-- 级别选择弹窗 -->
		<level-selector ref="levelSelectorRef" @confirm="handleLevelConfirm" @close="handleLevelClose" />
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import subjectSelector from '@/components/subject-selector.vue'
import playerCountSelector from '@/components/player-count-selector.vue'
import levelSelector from '@/components/level-selector.vue'
import api from '@/api'
import { onLoad, onShow } from '@dcloudio/uni-app'

import { ref } from 'vue'
import { useUserStore } from '@/store/index.js'
import { BASE_URL } from '@/utils/request'
const userStore = useUserStore()
const indexList = ref([])
onLoad(() => {
	if (userStore.hasLogin) {
		api.getUserInfo({
			user_id: userStore.userInfo?.id
		}).then(res => {
			userStore.setUserInfo(res.data)
		})
	}


	api.getQuestionList().then(res => {
		console.log(res.data)
		indexList.value = res.data
	}).catch(err => {
		console.log(err)
	})
	uni.login({
		provider: 'weixin',
		success: (res) => {
			console.log(res)
		},
		fail: (err) => {
			console.log(err)
		}
	})
})

onShow(() => {
	uni.showTabBar()
})

const subjectSelectorRef = ref(null)
const playerCountSelectorRef = ref(null)
const levelSelectorRef = ref(null)
// 自组局点击
const handleZizuClick = () => {
	uni.hideTabBar()
	playerCountSelectorRef.value?.openPopup('zizu')
}

// 处理等级场点击
const handleBeginnerClick = (val, scene_id) => {

	subjectSelectorRef.value?.openPopup({
		type: val,
		indexList: indexList.value,
		scene_id
	})
	uni.hideTabBar()
}

// 处理排位赛点击
const handlePaiweiClick = () => {
	uni.hideTabBar()
	playerCountSelectorRef.value?.openPopup()
}

// 排位赛流程状态
const paiweiFlow = ref({
	playerCount: null,
	level: null,
	subject: null
})

// 处理人数选择确认
const handlePlayerCountConfirm = (count, type) => {
	paiweiFlow.value.playerCount = count
	// 打开级别选择弹窗
	if (type === 'zizu') {
		uni.navigateTo({
			url: `/pages/index/datiqian/datiqian?mode=${type}&players=${count}&scene_id=1`
		})
		paiweiFlow.value = {
			playerCount: null,
			level: null,
			subject: null
		}
	} else {
		levelSelectorRef.value?.openPopup()
	}
}

// 处理人数选择关闭
const handlePlayerCountClose = () => {
	uni.showTabBar()
	console.log('人数选择弹窗已关闭')
}

// 处理级别选择确认
const handleLevelConfirm = (level) => {
	paiweiFlow.value.level = level
	console.log('选择的级别:', level)
	// 打开学科选择弹窗，传递排位赛类型
	subjectSelectorRef.value?.openPopup({
		type: `paiwei-${level}`
	})
}

// 处理级别选择关闭
const handleLevelClose = () => {
	uni.showTabBar()
	console.log('级别选择弹窗已关闭')
}

const isShowActivity = ref(false)
// 处理活动场点击
const handleActivityClick = () => {
	// isShowActivity.value = true
	uni.navigateTo({
		url: '/pages/index/actives'
	})
}
// 处理学科确认选择
const handleSubjectConfirm = (subject) => {
	console.log('选择的学科:', subject)
	console.log(paiweiFlow.value.playerCount)
	console.log(paiweiFlow.value.level)
	// 如果是排位赛流程，更新状态并处理
	if (paiweiFlow.value.playerCount && paiweiFlow.value.level) {
		paiweiFlow.value.subject = subject
		console.log('排位赛完整选择:', paiweiFlow.value)
		// 这里可以添加跳转逻辑或其他处理
		uni.navigateTo({
			url: `/pages/index/datiqian/datiqian?subject=${JSON.stringify(subject) }&mode=paiwei&players=${paiweiFlow.value.playerCount}&level=${paiweiFlow.value.level}`
		})

		// 重置排位赛流程状态
		paiweiFlow.value = {
			playerCount: null,
			level: null,
			subject: null
		}
	} else {
		// 普通模式
		uni.showToast({
			title: `已选择${getSubjectLabel(subject)}`,
			icon: 'success'
		})
		uni.navigateTo({
			url: '/pages/index/datiqian/datiqian?subject=' + JSON.stringify(subject)
		})
	}
}

// 处理学科弹窗关闭
const handleSubjectClose = () => {
	uni.showTabBar()
	console.log('学科选择弹窗已关闭')
}

// 获取学科标签
const getSubjectLabel = (value) => {
	const subjectMap = {
		'chinese': '语文',
		'math': '数学',
		'foreign': '外语',
		'politics': '政治',
		'history': '历史',
		'geography': '地理',
		'physics': '物理',
		'chemistry': '化学',
		'biology': '生物',
		'general': '常识',
		'mixed': '混合',
		'philosophy': '哲学',
		'economics': '经济学',
		'law': '法学',
		'education': '教育学',
		'literature': '文学',
		'science': '理学',
		'engineering': '工学',
		'agriculture': '农学',
		'medicine': '医学',
		'military': '军事学',
		'management': '管理学',
		'art': '艺术',
		'information': '信息技术',
		'technology': '通用技术',
		'health': '体育与健康'
	}
	return subjectMap[value] || value
}

// 获取级别标签
const getLevelLabel = (value) => {
	const levelMap = {
		'chuji': '初级',
		'zhongji': '中级',
		'gaoji': '高级',
		'zhuanjia': '专家级',
		'dashi': '大师级'
	}
	return levelMap[value] || value
}
</script>

<style lang="scss" scoped>
.page-container {
	background-color: #FFFFFF;
	position: relative;
	overflow: hidden;
}



/* 用户信息区域 */
.user-section {
	padding: 0 32rpx;
	margin-top: 20rpx;
}

.user-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.user-actions {
	display: flex;
	gap: 12rpx;
}

.action-btn {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #F5F5F5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #000000;
}

/* 问候语 */
.greeting-section {
	height: 140rpx;
	padding: 0 32rpx;
	padding-top: 32rpx;
	padding-bottom: 16rpx;
}

.greeting {
	font-size: 56rpx;
	color: #333;
}

/* 难度等级区域 */
.difficulty-section {
	padding: 0 32rpx;
	gap: 16rpx;
	margin-bottom: 16rpx;
}

.difficulty-card {
	flex: 1;
	height: 317rpx;
	border-radius: 40rpx;
	transition: transform 0.2s ease;
	position: relative;
	overflow: hidden;
	gap: 52rpx;

	&:active {
		transform: scale(0.95);
	}



	.title {
		font-size: 28rpx;
		font-weight: 700;
		color: #333;
		position: relative;
		z-index: 2;
	}
}

.bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* 大师场区域 */
.master-section {
	padding: 0 32px 24px;
}

.master-card {
	width: 100%;
	height: 317rpx;
	gap: 52rpx;
	border-radius: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
	position: relative;
	overflow: hidden;

	&:active {
		transform: scale(0.95);
	}

	.master-title {
		font-size: 30rpx;
		font-weight: 700;
		color: #333;
		position: relative;
		z-index: 2;
	}
}

/* 游戏模式区域 */
.game-modes-section {
	padding: 0 32rpx;
}

.modes-row {
	gap: 16rpx;
}

.mode-card {
	flex: 1;
	// height: 384rpx;
	border-radius: 40rpx;
	transition: transform 0.2s ease;
	position: relative;
	overflow: hidden;
	gap: 52rpx;

	&:active {
		transform: scale(0.95);
	}

	.mode-icon {
		font-size: 36px;
		margin-right: 12px;
		color: #000000;
		z-index: 1;
	}

}

.mode-text {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
	gap: 4rpx;
}

.mode-title {
	font-size: 28rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.8);
	position: relative;
	z-index: 2;
}

.mode-subtitle {
	font-size: 24rpx;
	color: rgba(0, 0, 0, 0.5);
}

.modes-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.custom {
	background: linear-gradient(135deg, #F0E68C 0%, #FFFFE0 100%);
}

.activity {
	background: linear-gradient(135deg, #D3D3D3 0%, #C0C0C0 100%);
}
</style>
